<template>
  <uni-nav-bar title="提现记录" color="#333" left-icon="left" @clickLeft="navBack" statusBar></uni-nav-bar>
  <view class="flex-col-hcenter">
    <!-- filter bar -->
    <view class="flex-vcenter filter-bar">
      <uni-datetime-picker
        v-model="range"
        type="daterange"
        :border="false"
        :clear-icon="false"
        rangeSeparator="至"
        @change="change"
      />
    </view>
    <!-- list -->
    <view v-if="isEmpty" class="flex-col-hcenter" style="margin-top: 140rpx">
      <image :src="Empty" style="width: 352rpx; height: 352rpx"></image>
      <text class="tip">暂无提现记录</text>
    </view>
    <view v-for="(item, index) in list" :key="index">
      <view class="item-box">
        <view class="flex-jcsb" style="padding: 30rpx 40rpx 20rpx; font-size: 30rpx">
          <text>提现至 {{ item.type_name }}</text>
          <text>
            <text style="font-size: 26rpx">¥</text>
            {{ item.total_amount }}
          </text>
        </view>
        <view class="split-line"></view>
        <view style="padding: 30rpx 40rpx">
          <!-- 订单号 -->
          <view class="flex-jcsb" style="font-size: 30rpx">
            <text>订单号</text>
            <view class="flex-vcenter">
              <view class="flex-center copy-btn" @click="copyText(item.order_sn)">复制</view>
              <text>{{ item.order_sn }}</text>
            </view>
          </view>
          <!-- 申请状态 -->
          <view class="flex-jcsb" style="margin-top: 20rpx; font-size: 30rpx">
            <text>申请状态</text>
            <text :class="item.state + '-color'">{{ item.status_text }}</text>
          </view>
          <!-- 账户信息 -->
          <view class="flex-jcsb" style="margin-top: 20rpx; font-size: 30rpx">
            <text>账户信息</text>
            <text>{{ item.bank_name }} {{ item.bankNum }}</text>
          </view>
          <!-- 到账金额 -->
          <view class="flex-jcsb" style="margin-top: 20rpx; font-size: 30rpx">
            <text>到账金额</text>
            <text>¥{{ item.arrival }}</text>
          </view>
          <!-- 手续费 -->
          <view class="flex-jcsb" style="margin-top: 20rpx; font-size: 30rpx">
            <text>手续费</text>
            <text>¥{{ item.handingfee }}</text>
          </view>
          <!-- 申请时间 -->
          <view class="flex-jcsb" style="margin-top: 20rpx; font-size: 30rpx">
            <text>申请时间</text>
            <text>{{ item.createtime }}</text>
          </view>
          <!-- 办结时间 -->
          <view v-show="item.status === 1" class="flex-jcsb" style="margin-top: 20rpx; font-size: 30rpx">
            <text>办结时间</text>
            <text>{{ item.operationtime }}</text>
          </view>
          <!-- 失败原因 -->
          <view v-show="item.status === 2" class="flex-jcsb" style="margin-top: 18rpx; font-size: 30rpx">
            <text>失败原因</text>
            <text>{{ item.des }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { recordList } from '@/gql/account';
import { RecordListQuery } from '@/gql/types/gql';
import { getDriverID } from '@/stores/driverID';
import { copyText } from '@/utils/copyText';
import { navBack } from '@/utils/navigator';
import { showLoading } from '@/utils/prompt';
import { onReachBottom } from '@dcloudio/uni-app';
import { Empty } from '@/utils/Static';
import { toPublish } from '@mqtt';
import { format, subDays } from 'date-fns';
import { computed, ref, Ref } from 'vue';
// static
const driver_id = getDriverID();
// data
const now = new Date();
let end = format(now, 'yyyy-MM-dd');
const daysAgo = subDays(now, 6);
let start = format(daysAgo, 'yyyy-MM-dd');
let page = 1;
let lastpage = 1;
const range = ref([start, end]);
const list: Ref<any[]> = ref([]);
const isReady = ref(false);
const isEmpty = computed(() => isReady.value && list.value.length === 0);

getList(reloadList);

function getList(callback: (obj: { data: RecordListQuery }) => void) {
  showLoading();
  const payload = {
    query: recordList,
    variables: {
      driver_id,
      page,
      start,
      end,
    },
  };
  toPublish('ql/driver/orderCartList', payload, (obj: { data: RecordListQuery }) => {
    if (!isReady.value) {
      isReady.value = true;
    }
    callback(obj);
  });
}

function reloadList({ data }: { data: RecordListQuery }) {
  const { withdraw_list } = data;
  list.value = handleList(withdraw_list.list);
  page = 1;
  lastpage = withdraw_list.lastpage;
}

function handleList(arr) {
  arr.forEach((v) => {
    v.bankNum = `****${v.bank_code.slice(-4)}`;
  });
  return arr;
}

function change([startFrom, endTo]) {
  page = 1;
  start = startFrom;
  end = endTo;
  getList(reloadList);
}

function toLoadmore() {
  if (page < lastpage) {
    page += 1;
    getList(loadmore);
  }
}

function loadmore({ data }: { data: RecordListQuery }) {
  const { withdraw_list } = data;
  list.value.push(...handleList(withdraw_list.list));
}

onReachBottom(toLoadmore);
</script>

<style scoped lang="less">
.filter-bar {
  width: 96%;
  height: 80rpx;
  background-color: white;
  border-radius: 5px;
  box-shadow: 2px 4px 8px 0px rgba(204, 204, 204, 0.5);
  margin: 15rpx auto;
  // padding-left: 46rpx;
  // padding-right: 10rpx;
}

.tip {
  margin-top: 14rpx;
  font-size: 24rpx;
  color: #999;
}

.item-box {
  width: 720rpx;
  background: white;
  box-shadow: 2px 4px 8px 0px rgba(204, 204, 204, 0.5);
  border-radius: 5px;
  margin-bottom: 15rpx;

  .split-line {
    margin: 0 14rpx 0 18rpx;
    height: 2rpx;
    background-color: #f2f2f2;
  }

  .copy-btn {
    width: 70rpx;
    height: 30rpx;
    background: #c4c4c4;
    border-radius: 5px;
    font-size: 24rpx;
    color: white;
    margin-right: 10rpx;
  }
  .processing-color {
    color: #1b91ff;
  }
}
</style>
<style>
.filter-bar >>> .uni-date__x-input {
  font-size: 30rpx !important;
}
.filter-bar >>> .uni-date-x {
  font-size: 30rpx !important;
  background-color: transparent !important;
}
.filter-bar >>> .uni-icons {
  font-size: 48rpx !important;
}
</style>
